<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>视频直播 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="直播：流式传输协议，传输非常短的一小截视频   直播需要： 直播服务器：云主机 OBS:推流工具：将现场的视频信号传到网络的过程，对网络要求比较高 VLC：拉流工具: 服务器已有直播内容，根据协议类型（如RTMP、RTP、RTSP、HTTP等），与服务器建立连接并接收数据，进行拉取的过程 使用到了rtmp协议还有video标签     RTMP直播协议RTMP 是专为流媒体开发的协议，对底层的优化">
<meta property="og:type" content="article">
<meta property="og:title" content="视频直播">
<meta property="og:url" content="https://mourning-soul.gitee.io/hexo/2021/02/05/%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="直播：流式传输协议，传输非常短的一小截视频   直播需要： 直播服务器：云主机 OBS:推流工具：将现场的视频信号传到网络的过程，对网络要求比较高 VLC：拉流工具: 服务器已有直播内容，根据协议类型（如RTMP、RTP、RTSP、HTTP等），与服务器建立连接并接收数据，进行拉取的过程 使用到了rtmp协议还有video标签     RTMP直播协议RTMP 是专为流媒体开发的协议，对底层的优化">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-02-04T16:00:00.000Z">
<meta property="article:modified_time" content="2021-02-06T05:17:29.876Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="-blocker">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/hexo/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/hexo/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/hexo/css/style.css">

  
    
<link rel="stylesheet" href="/hexo/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/hexo/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/hexo/">Home</a>
        
          <a class="main-nav-link" href="/hexo/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/hexo/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://mourning-soul.gitee.io/hexo"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-视频直播" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/hexo/2021/02/05/%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/" class="article-date">
  <time class="dt-published" datetime="2021-02-04T16:00:00.000Z" itemprop="datePublished">2021-02-05</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      视频直播
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="直播：流式传输协议，传输非常短的一小截视频"><a href="#直播：流式传输协议，传输非常短的一小截视频" class="headerlink" title="直播：流式传输协议，传输非常短的一小截视频"></a>直播：流式传输协议，传输非常短的一小截视频</h2><hr>
<br>

<h2 id="直播需要："><a href="#直播需要：" class="headerlink" title="直播需要："></a>直播需要：</h2><ul>
<li>直播服务器：云主机</li>
<li>OBS:推流工具：将现场的视频信号传到网络的过程，对网络要求比较高</li>
<li>VLC：拉流工具: 服务器已有直播内容，根据协议类型（如RTMP、RTP、RTSP、HTTP等），与服务器建立连接并接收数据，进行拉取的过程</li>
<li>使用到了rtmp协议还有video标签</li>
</ul>
<hr>
<br>

<h2 id="RTMP直播协议"><a href="#RTMP直播协议" class="headerlink" title="RTMP直播协议"></a>RTMP直播协议</h2><h3 id="RTMP-是专为流媒体开发的协议，对底层的优化比其它协议更加优秀"><a href="#RTMP-是专为流媒体开发的协议，对底层的优化比其它协议更加优秀" class="headerlink" title="RTMP 是专为流媒体开发的协议，对底层的优化比其它协议更加优秀"></a>RTMP 是专为流媒体开发的协议，对底层的<strong>优化</strong>比其它协议更加优秀</h3><hr>
<h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3><ul>
<li>  它对 Adobe Flash 支持好</li>
<li>  基本上所有的编码器（摄像头之类）都支持 RTMP 输出</li>
<li>  另外RTMP适合长时间播放，即 10 天多连续播放没有出现问题，稳定</li>
<li>  最后 RTMP 的延迟<strong>相对较低</strong>，一般延时在 1-3s 之间，一般的视频会议，互动式直播，完全是够用的</li>
</ul>
<hr>
<p>缺点</p>
<ul>
<li>  它是基于 TCP 传输，非公共端口，可能会被防火墙阻拦，1935</li>
<li>  RTMP 为 Adobe 私有协议，很多设备无法播放，兼容性不高</li>
<li>  Html基础支持不好，无法直接使用HTML标签完成拉流</li>
</ul>
<hr>
<br>

<h2 id="HTTP-FLV直播协议"><a href="#HTTP-FLV直播协议" class="headerlink" title="HTTP-FLV直播协议"></a>HTTP-FLV直播协议</h2><ul>
<li>  Youtube，B站</li>
</ul>
<h3 id="流媒体数据封装成-FLV-格式"><a href="#流媒体数据封装成-FLV-格式" class="headerlink" title="流媒体数据封装成 FLV 格式"></a>流媒体数据封装成 FLV 格式</h3><h3 id="FLV-简单轻量、加载速度极快、播放快、"><a href="#FLV-简单轻量、加载速度极快、播放快、" class="headerlink" title="FLV: 简单轻量、加载速度极快、播放快、"></a>FLV: 简单轻量、加载速度极快、播放快、</h3><ol>
<li> 推流，服务器把视频封装为.flv 一段段</li>
<li> 浏览器拉流，下载视频</li>
<li> Content-Type: rtmp/flv</li>
</ol>
<hr>
<p>优点</p>
<ul>
<li>可以直接通过http协议进行传输，http属于公共协议，公共端口：80<ul>
<li>  html播放视频就很简单， video</li>
</ul>
</li>
<li>  支持加密，使用https</li>
<li>  兼容移动端设备，比如：安卓、ios</li>
</ul>
<hr>
<p>缺点</p>
<ul>
<li>  会缓存直播数据，保存直播传输过来的一段段flv文件，隐私保密不好</li>
<li>  不能在大并发情况下使用</li>
</ul>
<hr>
<br>

<h2 id="HLS直播协议"><a href="#HLS直播协议" class="headerlink" title="HLS直播协议"></a>HLS直播协议</h2><ul>
<li>  苹果公司的</li>
</ul>
<hr>
<ul>
<li>  对于苹果系列产品支持优秀</li>
<li>  兼容性ok，通过 HTTP 传输</li>
</ul>
<hr>
<ul>
<li>  延迟极高，60s都是可以接收的</li>
<li>  ts 切片较小，会造成海量小文件，保存麻烦，缓存麻烦</li>
</ul>
<hr>
<br>

<h2 id="搭建HTTP-FLV直播"><a href="#搭建HTTP-FLV直播" class="headerlink" title="搭建HTTP-FLV直播"></a>搭建HTTP-FLV直播</h2><ul>
<li>创建软件的储存位置</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mkdir &#x2F;usr&#x2F;local&#x2F;nginx-flv</span><br><span class="line">&#x2F;&#x2F; 创建了一个安装目录</span><br><span class="line">mkdir &#x2F;home&#x2F;flv-tools</span><br><span class="line">&#x2F;&#x2F; 存储所需软件</span><br></pre></td></tr></table></figure>
<ul>
<li>下载nginx</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">wget http:&#x2F;&#x2F;nginx.org&#x2F;download&#x2F;nginx-1.10.3.tar.gz</span><br></pre></td></tr></table></figure>
<ul>
<li>下载直播模块</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https:&#x2F;&#x2F;github.com&#x2F;arut&#x2F;nginx-rtmp-module</span><br></pre></td></tr></table></figure>
<ul>
<li>解压下载好的rtmp直播模块</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">unzip nginx-rtmp-module-master.zip </span><br></pre></td></tr></table></figure>
<ul>
<li>创建nginx的安装目录</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkdir &#x2F;usr&#x2F;local&#x2F;nginx-rtmp</span><br></pre></td></tr></table></figure>
<ul>
<li>配置前，要先记得安装依赖</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel </span><br></pre></td></tr></table></figure>
<ul>
<li>配置nginx安装过程，搭配直播模块使用(nginx-rtmp-module)</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd nginx-1.10.3</span><br><span class="line">.&#x2F;configure --add-module&#x3D;&#x2F;home&#x2F;rtmp-tools&#x2F;nginx-rtmp-module-master&#x2F; --with-http_ssl_module --prefix&#x3D;&#x2F;usr&#x2F;local&#x2F;nginx-rtmp</span><br></pre></td></tr></table></figure>
<ul>
<li>编译</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make</span><br></pre></td></tr></table></figure>
<ul>
<li>安装</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make install</span><br></pre></td></tr></table></figure>
<ul>
<li>修改配置文件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;usr&#x2F;local&#x2F;nginx-rtmp&#x2F;conf</span><br><span class="line">vim nginx.conf</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">rtmp &#123;</span><br><span class="line">    server &#123;</span><br><span class="line">        listen 1935;</span><br><span class="line">        application live &#123;</span><br><span class="line">            live on;</span><br><span class="line">            record off;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>配置文件http拉流部分</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">http &#123;</span><br><span class="line">	include       mime.types;</span><br><span class="line">	default_type  application&#x2F;octet-stream;</span><br><span class="line">	sendfile        on;</span><br><span class="line">	keepalive_timeout  65;</span><br><span class="line">	server &#123;</span><br><span class="line">		listen       8080; # 拉流通过8080去拉流</span><br><span class="line">		# http:&#x2F;&#x2F;123.123.123.123:8080&#x2F;live&#x2F;?port&#x3D;1935&amp;stream&#x3D;test</span><br><span class="line">		server_name  localhost;</span><br><span class="line">		location &#x2F;live &#123;</span><br><span class="line">			flv_live on;</span><br><span class="line">			chunked_transfer_encoding  on;</span><br><span class="line">			add_header &#39;Access-Control-Allow-Origin&#39; &#39;*&#39;;</span><br><span class="line">			add_header &#39;Access-Control-Allow-Credentials&#39; &#39;true&#39;;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>关闭旧有服务</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;usr&#x2F;local&#x2F;nginx-rtmp&#x2F;sbin&#x2F;nginx -s stop</span><br><span class="line">&#x2F;usr&#x2F;local&#x2F;nginx-rtmp&#x2F;sbin&#x2F;nginx -s reload</span><br></pre></td></tr></table></figure>
<ul>
<li>开启新服务</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;usr&#x2F;local&#x2F;nginx-flv&#x2F;sbin&#x2F;nginx -c &#x2F;usr&#x2F;local&#x2F;nginx-flv&#x2F;conf&#x2F;nginx.conf</span><br></pre></td></tr></table></figure>
<br>

<hr>
<h2 id="记得打开阿里云的防火墙"><a href="#记得打开阿里云的防火墙" class="headerlink" title="记得打开阿里云的防火墙"></a>记得打开阿里云的防火墙</h2><hr>
<br>

<h2 id="打开OBS进行推流配置"><a href="#打开OBS进行推流配置" class="headerlink" title="打开OBS进行推流配置"></a>打开OBS进行推流配置</h2><p>推流地址为:rtmp://云主机IP及端口/live/自定义密钥</p>
<hr>
<h2 id="打开VLC进行拉流"><a href="#打开VLC进行拉流" class="headerlink" title="打开VLC进行拉流"></a>打开VLC进行拉流</h2><p>拉流地址：http://云主机IP及端口/live?port=端口&amp;app=live&amp;stream=密钥</p>
<hr>
<br>

<h2 id="Vue实现拉流"><a href="#Vue实现拉流" class="headerlink" title="Vue实现拉流"></a>Vue实现拉流</h2><h3 id="安装flv-js开源工具，进行拉流"><a href="#安装flv-js开源工具，进行拉流" class="headerlink" title="安装flv.js开源工具，进行拉流"></a>安装flv.js开源工具，进行拉流</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install flv.js --save</span><br></pre></td></tr></table></figure>
<h3 id="导包"><a href="#导包" class="headerlink" title="导包"></a>导包</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import flv from &#39;flv.js&#39;</span><br></pre></td></tr></table></figure>
<h3 id="构建页面标签，播放标签"><a href="#构建页面标签，播放标签" class="headerlink" title="构建页面标签，播放标签"></a>构建页面标签，播放标签</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;video id&#x3D;&quot;videoElement&quot; controls muted&gt;</span><br><span class="line">  	Your browser is too old which doesn&#39;t support HTML5 video.</span><br><span class="line">&lt;&#x2F;video&gt;</span><br></pre></td></tr></table></figure>
<h3 id="进行初始化"><a href="#进行初始化" class="headerlink" title="进行初始化"></a>进行初始化</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">mounted() &#123;</span><br><span class="line">    var videoElement &#x3D; document.getElementById(&#39;videoElement&#39;);</span><br><span class="line">    var flvPlayer &#x3D; flv.createPlayer(&#123;</span><br><span class="line">      type: &#39;flv&#39;,</span><br><span class="line">      enableWorker: true,     &#x2F;&#x2F;浏览器端开启flv.js的worker,多进程运行flv.js</span><br><span class="line">      isLive: true,           &#x2F;&#x2F;直播模式</span><br><span class="line">      hasAudio: false,        &#x2F;&#x2F;关闭音频</span><br><span class="line">      hasVideo: true,</span><br><span class="line">      &#x2F;&#x2F; cors: true,</span><br><span class="line">      stashInitialSize: 128,</span><br><span class="line">      enableStashBuffer: false, &#x2F;&#x2F;播放flv时，设置是否启用播放缓存，只在直播起作用。</span><br><span class="line">      url: &#39;http:&#x2F;&#x2F;云主机IP及端口&#x2F;live?port&#x3D;端口&amp;app&#x3D;live&amp;stream&#x3D;密钥&#39;</span><br><span class="line">    &#125;)</span><br><span class="line">    flvPlayer.attachMediaElement(videoElement);</span><br><span class="line">    flvPlayer.load();</span><br><span class="line">    flvPlayer.play();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://mourning-soul.gitee.io/hexo/2021/02/05/%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/" data-id="ckkt9opgd000oi4twapbgd430" data-title="视频直播" class="article-share-link">Share</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexo/tags/blocker/" rel="tag">-blocker</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/hexo/2021/02/04/%E6%97%A0%E9%99%90%E6%9E%81%E5%88%86%E7%B1%BB%E8%87%AA%E5%85%B3%E8%81%94%E9%80%92%E5%BD%92/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">无限极分类自关联递归</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/hexo/tags/blocker/" rel="tag">-blocker</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/hexo/tags/blocker/" style="font-size: 10px;">-blocker</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/hexo/archives/2021/02/">February 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/hexo/archives/2021/01/">January 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/hexo/2021/02/05/%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD/">视频直播</a>
          </li>
        
          <li>
            <a href="/hexo/2021/02/04/%E6%97%A0%E9%99%90%E6%9E%81%E5%88%86%E7%B1%BB%E8%87%AA%E5%85%B3%E8%81%94%E9%80%92%E5%BD%92/">无限极分类自关联递归</a>
          </li>
        
          <li>
            <a href="/hexo/2021/02/03/webshell/">webshell</a>
          </li>
        
          <li>
            <a href="/hexo/2021/02/02/redis%E9%94%AE%E7%A9%BA%E9%97%B4%E4%BA%8B%E4%BB%B6/">redis键空间事件</a>
          </li>
        
          <li>
            <a href="/hexo/2021/02/01/redis%E5%8F%91%E5%B8%83%E8%80%85%E8%AE%A2%E9%98%85%E8%80%85/">redis发布者订阅者</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2021 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/hexo/" class="mobile-nav-link">Home</a>
  
    <a href="/hexo/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/hexo/js/jquery-3.4.1.min.js"></script>



  
<script src="/hexo/fancybox/jquery.fancybox.min.js"></script>




<script src="/hexo/js/script.js"></script>





  </div>
</body>
</html>